 /*
 * @description: 商家物料清单备注弹窗
 * @Author: along
 * @Date: 2021-03-16
 * @Last Modified by: along
 * @Last Modified time: 2021-03-16
 */
<template>
    <el-dialog
        :title="TYPE == 'add' ? '新建备注' : '修改备注'"
        :visible.sync="dialogVisible"
        width="640px"
        :close-on-click-modal="false"
        class="remarkDialog"
    >
        <div class="_model">
            <p
                class="_model_title"
            >
                备注信息
            </p>
            <el-input
                type="textarea"
                placeholder="请输入备注信息..."
                v-model="reson"
                maxlength="300"
                show-word-limit
                :autosize="{ minRows: 4, maxRows: 6}"
            />
        </div>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                size="small"
                type="default"
                @click="dialogVisible = false"
                :style="{width: '100px', marginRight: '60px'}"
            >
                取 消
            </el-button>
            <el-button
                size="small"
                :disabled="!reson"
                type="primary"
                @click="confirm()"
                :style="{width: '100px'}"
            >
                确 定
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'RemarkDialog',
    data () {
        return {
            TYPE: '',//add: 新建备注 edit: 修改备注
            dialogVisible: false,
            reson: '',
        };
    },
    methods: {
        show (obj) {
            this.TYPE = obj.type;
            this.reson = obj.reson ? obj.reson : '';
            this.dialogVisible = true;
        },
        close () {
            this.dialogVisible = false;
        },
        confirm () {
            this.$emit('confirm', this.reson);
            this.close();
        }
    }
};
</script>

<style lang="less" scoped>
.remarkDialog {
    ._model {
        width: 100%;
        display: flex;
        flex-direction: column;
        ._model_title {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            position: relative;
            margin-bottom: 16px;
        }
    }
    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
}
</style>

<style lang="less">
.remarkDialog {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 32px 64px 24px 64px;
    }
    .el-textarea__inner {
        resize: none;
    }
}
</style>